<template>
  <div class="app-main-container">
    <div class="reserve">
      <!-- <div class="app-main-title">场地预定</div> -->
      <el-tabs v-model="activeProject" @tab-click="tabChange">
        <el-tab-pane
          v-for="item in projectList"
          :key="item.id"
          :label="item.projectName"
          :name="item.id"
        />
      </el-tabs>
      <!-- 日期和场区选择、颜色标识 -->
      <div class="date-legend">
        <div class="input">
          <el-date-picker
            v-model="activeDate"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="选择日期"
            :clearable="false"
            @change="getSiteList"
          />
        </div>
        <div class="input" style="width: 200px; flex: none">
          <el-select
            v-model="activeArea"
            placeholder="选择场区"
            width="200px"
            clearable
            @change="getSiteList"
          >
            <el-option
              v-for="area in areaList"
              :key="area.id"
              :label="area.areaName"
              :value="area.id"
            />
          </el-select>
        </div>
        <div class="color-list">
          <div
            v-for="color in colorList"
            :key="color.id"
            class="color-item"
          >
            <div
              class="number"
              :style="'background-color: ' + color.number"
            />
            <div class="name">{{ color.name }}</div>
          </div>
        </div>
      </div>
      <div class="week">
        <span
          :class="new Date(weekList[0].old.toLocaleDateString()).getTime() <= presentTime ? 'no' : ''"
          @click="weekChange(1, new Date(weekList[0].old.toLocaleDateString()).getTime() <= presentTime)"
        ><i class="el-icon-arrow-left" /></span>
        <span
          v-for="(weeks, dex) in weekList"
          :key="dex"
          :class="
            new Date(weeks.old.toLocaleDateString()).getTime() < presentTime
              ? 'none'
              : activeDate == weeks.value
                ? 'show on'
                : 'show'
          "
          @click="weekClick(weeks, new Date(weeks.old.toLocaleDateString()).getTime() >= presentTime)"
        >
          {{ weeks.label }}
        </span>
        <span @click="weekChange(2)"><i class="el-icon-arrow-right" /></span>
      </div>
      <div class="site-list-box">
        <div
          v-if="siteListData && siteListData.length > 0"
          class="time-list"
        >
          <div class="list-item close-all" @click="yjkg">
            <i class="el-icon-switch-button wzred" title="一键开关灯" />
          </div>
          <div
            v-for="time in siteListData[0].sites"
            :key="time.id"
            class="list-item time"
          >
            {{ time.beginTime + " - " + time.endTime }}
          </div>
        </div>
        <div
          v-if="
            siteListData &&
              siteListData.length > 0 &&
              siteListData[0].sites &&
              siteListData[0].sites.length > 0
          "
          class="site-list"
          :style="
            'height: ' + (siteListData[0].sites.length + 1.4) * 45 + 'px'
          "
        >
          <div
            v-for="site in siteListData"
            :key="site.id"
            class="site-item"
          >
            <div class="list-item site-name" :title="site.siteModelName">
              <i
                v-if="site.status"
                class="el-icon-switch-button"
                title="开关灯"
                style="margin-right: 2px"
                @click="kgdBtn(site.siteModelId)"
              />
              {{ site.siteModelName }}
            </div>
            <el-popover
              v-for="price in site.sites"
              :key="price.id"
              transition="none"
              placement="top"
              popper-class="popClass"
              :close-delay="closeDelay"
              trigger="hover"
              :content="
                site.siteModelName +
                  ':' +
                  price.beginTime +
                  ' - ' +
                  price.endTime
              "
            >
              <div
                slot="reference"
                class="list-item site-price"
                :class="
                  price.overdue == true
                    ? price.status === '1'
                      ? 'red'
                      : price.status === '2'
                        ? 'green'
                        : 'hui'
                    : price.status === '1' || price.status === '4'
                      ? 'red'
                      : price.status === '2' || price.status === '5'
                        ? 'green'
                        : price.status === '3'
                          ? 'yellow'
                          : price.status === '6'
                            ? 'blue'
                            : price.status === '7' ||
                              price.status === '8' ||
                              price.status === '10' ||
                              price.status === '9'
                              ? 'hui'
                              : ''
                "
                :style="{
                  color:
                    siteIds && siteIds.indexOf(price.id) != -1
                      ? '#fff'
                      : '',
                  backgroundColor:
                    siteIds && siteIds.indexOf(price.id) != -1
                      ? 'rgb(67, 94, 190)'
                      : '',
                  backgroundImage:
                    siteIds && siteIds.indexOf(price.id) != -1
                      ? 'url(https://doumeetest.oss-cn-beijing.aliyuncs.com/appIconImg/20190304/lQLPJxaayB5XVR0oKLAFiqpcM_AFuQL-qSEiQKEA_40_40.png)'
                      : '',
                }"
                @click="
                  ccClick(
                    price,
                    site.siteModelName,
                    site.siteModelId,
                    site,
                    price
                  )
                "
              >
                <span slot="reference">{{
                  price.nickName ? price.nickName : price.price
                }}</span>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="reserve-info">
      <div class="app-main-title">预定信息</div>
      <div v-if="details.userType" class="information">
        <div v-if="details.userType == 1">
          客户姓名：{{ details.userName || "无" }}
        </div>
        <div v-if="details.userType == 1">
          手机号：{{ details.userPhone || "无" }}
        </div>
        <div v-if="details.userType == 0">
          会员姓名：{{ details.memberName }}
        </div>
        <div v-if="details.userType == 0">
          会员手机号：{{ details.memberPhone }}
        </div>
        <div v-if="details.userType == 0">会员卡号：{{ details.number }}</div>
        <div>
          预定方式：{{ details.userType == 0 ? "会员登记" : "散客登记" }}
        </div>
        <div v-if="details.realPrice || details.realPrice === 0 || details.realPrice === '0'">金额：{{ details.realPrice }}元</div>
        <div v-else>
          金额：{{
            details.userType == 0 ? details.memberPrice : details.allPrice
          }}元
        </div>
        <div v-if="details.payMethod">
          支付方式：{{ details.payMethod == "01" ? "会员卡" : "现金" }}
        </div>
        <div>备注：{{ details.remarks || "无" }}</div>
      </div>
      <div v-if="operation" class="reserveBtn">
        <div
          v-if="meta.indexOf('AreaReserveCre') > -1"
          :class="status === '0' ? '' : 'none'"
          @click="reserveShow"
        >
          预定
        </div>
        <div
          v-if="meta.indexOf('AreaReserveStatus') > -1"
          :class="
            status !== '0' || siteIds.length > 1 || overDues.indexOf(true) > -1
              ? 'none'
              : ''
          "
          @click="lockStatus"
        >
          锁场
        </div>
        <div
          :class="
            overDues.indexOf(true) == -1 && (status === '1' || status === '4')
              ? ''
              : 'none'
          "
          @click="paymentShow(details)"
        >
          付款
        </div>
        <div
          v-if="meta.indexOf('AreaReserveCan') > -1"
          :class="
            status === '1' || status === '2' || status === '4' || status === '5'
              ? ''
              : 'none'
          "
          @click="cancelReserveBtn"
        >
          取消
        </div>
        <div
          v-if="meta.indexOf('AreaReserveCha') > -1"
          :class="
            overDues.indexOf(true) == -1 &&
              (status === '1' ||
                status === '2' ||
                status === '4' ||
                status === '5')
              ? ''
              : 'none'
          "
          @click="replaceShow"
        >
          换场
        </div>
        <div
          v-if="meta.indexOf('AreaReserveStatus') > -1"
          :class="status !== '3' || siteIds.length > 1 ? 'none' : ''"
          @click="lockStatusb"
        >
          解锁
        </div>
        <div
          v-if="meta.indexOf('AreaReserveEdit') > -1"
          :class="
            overDues.indexOf(true) == -1 && (status === '1' || status === '2')
              ? ''
              : 'none'
          "
          @click="editShow"
        >
          修改预定
        </div>
        <div
          v-if="meta.indexOf('AreaReserveAsf') > -1"
          :class="overDues.indexOf(true) == -1 && status === '0' ? '' : 'none'"
          @click="siteFixedReserveShow"
        >
          固定预定
        </div>
        <div
          :class="status === '2' || status === '5' ? '' : 'none'"
          @click="printOrder"
        >
          打印
        </div>
      </div>
    </div>
    <el-dialog
      title="换场"
      :visible.sync="showReplace"
      class="dialog-replace"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <div class="title">预定场地：</div>
      <div class="replace-content">
        <div
          v-for="(item, index) in details.siteList"
          :key="index"
          class="content"
        >
          <div>
            场地：<span>{{ item.siteModelName }}</span>
          </div>
          <div>
            时间：<span>{{ item.beginTime + " - " + item.endTime }}</span>
          </div>
          <div>
            费用：<span>{{ item.price }}元</span>
          </div>
        </div>
      </div>
      <div class="title">
        订单金额：<b>{{ details.allPrice }}</b><span>元</span>
      </div>
      <div class="title">
        客户类型：{{ details.userType == 0 ? "会员登记" : "散客登记" }}
      </div>
      <div
        v-if="details.userType == 0 && membergh"
        class="member"
        style="margin-bottom: 15px"
      >
        <div class="cont">
          <div><span>NO.</span>{{ membergh.number }}</div>
          <div>{{ membergh.nickName }}</div>
          <div v-if="membergh.cardName" class="lx">{{ membergh.cardName }}</div>
        </div>
        <div class="cont">
          <div><span>手机：</span>{{ membergh.phone }}</div>
          <div><span>余额：</span>{{ membergh.money }}</div>
        </div>
      </div>
      <div
        v-if="details.userType == 1"
        class="member"
        style="margin-bottom: 15px"
      >
        <div class="cont">
          <div><span>客户姓名：</span>{{ details.userName }}</div>
        </div>
        <div class="cont">
          <div><span>手机号：</span>{{ details.userPhone }}</div>
        </div>
      </div>
      <div class="title">备注信息：{{ details.remarks }}</div>
      <div class="title">
        更换场地：<strong @click="replacement">更换场地</strong>
      </div>
      <div class="replace-content">
        <div v-for="(item, index) in reserveFormb" :key="index" class="content">
          <div>
            场地：<span>{{ item.name }}</span>
          </div>
          <div>
            时间：<span>{{ item.beginTime + " - " + item.endTime }}</span>
          </div>
          <div>
            费用：<span>{{ item.price }}元</span>
          </div>
          <div
            class="delete"
            title="删除当前场次"
            @click="deleteReserve(index)"
          >
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelReplace">取消</el-button>
        <el-button v-preventReClick type="primary" @click="clickReplace">确认更换</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="选择场地"
      :visible.sync="showList"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="1100px"
      class="dialog-list"
      @close="replacementBtn(1)"
    >
      <div class="date-legend">
        <div class="input">
          <el-date-picker
            v-model="activeDateb"
            :picker-options="pickerOptions"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :clearable="false"
            @change="getSiteListb"
          />
        </div>
        <div class="input">
          <el-select
            v-model="activeAreab"
            placeholder="选择场区"
            clearable
            @change="getSiteListb"
          >
            <el-option
              v-for="area in areaList"
              :key="area.id"
              :label="area.areaName"
              :value="area.id"
            />
          </el-select>
        </div>
        <div class="color-list">
          <div v-for="color in colorList" :key="color.id" class="color-item">
            <div class="number" :style="'background-color: ' + color.number" />
            <div class="name">{{ color.name }}</div>
          </div>
        </div>
      </div>
      <div class="week">
        <span
          :class="
            new Date(weekListb[0] && weekListb[0].old.toLocaleDateString()).getTime() <= presentTime ? 'no' : ''
          "
          @click="weekChangeb(1, new Date(weekListb[0].old.toLocaleDateString()).getTime() <= presentTime)"
        >
          <i class="el-icon-arrow-left" /></span>
        <span
          v-for="(weeks, dex) in weekListb"
          :key="dex"
          :class="
            new Date(weeks.old.toLocaleDateString()).getTime() < presentTime
              ? 'none'
              : activeDateb == weeks.value
                ? 'show on'
                : 'show'
          "
          @click="weekClickb(weeks, weeks.old.getTime() >= presentTime)"
        >
          {{ weeks.label }}
        </span>
        <span @click="weekChangeb(2)"><i class="el-icon-arrow-right" /></span>
      </div>
      <div class="site-list-box" style="max-height: calc(100vh - 400px)">
        <div v-if="siteListDatab && siteListDatab.length > 0" class="time-list">
          <div class="list-item close-all" style="font-size: 14px">全部</div>
          <div
            v-for="time in siteListDatab[0].sites"
            :key="time.id"
            class="list-item time"
          >
            {{ time.beginTime + " - " + time.endTime }}
          </div>
        </div>
        <div
          v-if="
            siteListDatab &&
              siteListDatab.length > 0 &&
              siteListDatab[0].sites &&
              siteListDatab[0].sites.length > 0
          "
          class="site-list"
          :style="
            'height: ' + (siteListDatab[0].sites.length + 1.4) * 45 + 'px'
          "
        >
          <div v-for="site in siteListDatab" :key="site.id" class="site-item">
            <div class="list-item site-name">{{ site.siteModelName }}</div>
            <el-popover
              v-for="price in site.sites"
              :key="price.id"
              transition="none"
              placement="top"
              popper-class="popClass"
              :close-delay="closeDelay"
              trigger="hover"
              :content="
                site.siteModelName +
                  ':' +
                  price.beginTime +
                  ' - ' +
                  price.endTime
              "
            >
              <div
                slot="reference"
                class="list-item site-price"
                :class="
                  price.status === '1' || price.status === '4'
                    ? 'red'
                    : price.status === '2' || price.status === '5'
                      ? 'green'
                      : price.status === '3'
                        ? 'yellow'
                        : price.status === '6'
                          ? 'blue'
                          : price.status === '7' ||
                            price.status === '8' ||
                            price.status === '10' ||
                            price.status === '9'
                            ? 'hui'
                            : ''
                "
                :style="{
                  color:
                    siteIdsb && siteIdsb.indexOf(price.id) != -1 ? '#fff' : '',
                  backgroundColor:
                    siteIdsb && siteIdsb.indexOf(price.id) != -1
                      ? 'rgb(67, 94, 190)'
                      : '',
                  backgroundImage:
                    siteIdsb && siteIdsb.indexOf(price.id) != -1
                      ? 'url(https://doumeetest.oss-cn-beijing.aliyuncs.com/appIconImg/20190304/lQLPJxaayB5XVR0oKLAFiqpcM_AFuQL-qSEiQKEA_40_40.png)'
                      : '',
                }"
                @click="ccClickb(price, site.siteModelName, site.siteModelId)"
              >
                <span>{{ price.nickName ? price.nickName : price.price }}</span>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="replacementBtn(0)">取消</el-button>
        <el-button v-preventReClick type="primary" @click="replacementBtn(1)">确 认</el-button>
      </div>
    </el-dialog>
    <orderDialog ref="child" @orderSuccess="getSiteList" />
    <EditPd ref="edit" />
    <FixedReserve ref="fixedReserve" />
  </div>
</template>

<script>
const mapWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
import dayjs from 'dayjs'
import { parseTime } from '@/utils/index'
import {
  getProjectList,
  memberInfo,
  getAreaListByProjectId,
  changeReserve,
  siteList,
  siteReserve,
  VIPInfo,
  siteLockStatus,
  cancelReserve,
  configList,
  unsubscribeOrder,
  getPrice,
  printOrder,
  devSiteLine
} from '@/api'
import orderDialog from '@/components/order'
import EditPd from '@/components/edtPd'
import FixedReserve from '@/components/FixedReserve'
import store from '@/store'
export default {
  name: 'AreaReserve',
  components: {
    orderDialog,
    EditPd,
    FixedReserve
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      authCode: '',
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      presentTime: new Date(new Date().toLocaleDateString()).getTime(),
      colorList: [
        { id: 1, name: '可用', number: 'rgba(74, 164, 104, 0.4)' },
        { id: 2, name: '锁场', number: 'rgba(251, 178, 20, 1)' },
        { id: 3, name: '预定未付', number: 'rgba(237, 77, 0, 1)' },
        { id: 4, name: '预定已付', number: 'rgba(74, 164, 104, 1)' },
        { id: 5, name: '过期', number: 'rgba(170, 170, 170, 1)' },
        { id: 6, name: '免费', number: 'rgb(61,206,209)' }
      ],
      projectList: [],
      closeDelay: 0,
      activeProject: '',
      activeDate: '',
      areaList: [],
      activeArea: '',
      siteListData: [],
      weekList: [],
      weekListb: [],
      currentDate: '',
      details: {},
      operation: false,
      overdue: false,
      overDues: [],
      status: '',
      siteIds: [],
      siteId: '',
      showReserve: false,
      editPd: false,
      reserveForm: [],
      userType: 0,
      zprice: '',
      week: [],
      reserveAndOrderId: '',
      members: '',
      member: '',
      showPayment: false,
      payList: [],
      payMethod: '01',
      showReplace: false,
      cardFk: '',
      memberfk: '',
      payPwd: '',
      membergh: '',
      showList: false,
      activeDateb: '',
      activeAreab: '',
      siteListDatab: [],
      currentDateb: '',
      statusb: '',
      siteIdsb: [],
      reserveFormb: [],
      change: 0,
      changePrice: '',
      canMod: false,
      meta: [],
      lastPrice: {},
      integralUse: '0',
      code: ''
    }
  },
  created() {
    this.pdgj()
    this.activeDate = this.formatDate(new Date()).value
    this.toGetProjectList()
    this.setDate(new Date())
    this.meta = this.$route.meta.buttons || []
  },
  mounted() {
    const code = this.$route.query.code
    if (code) {
      this.code = code
    }
  },
  methods: {
    yjkg() {
      // const that = this
      const venueId = sessionStorage.getItem('venueId')
      const siteListData = this.siteListData
      const siteId = []
      siteListData.forEach((e) => {
        siteId.push(e.siteModelId)
      })
      this.$confirm('请选择一键开关灯?', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '一键关灯',
        cancelButtonText: '一键开灯',
        type: 'warning'
      })
        .then(() => {
          devSiteLine({ param: { siteId, venueId, status: '1' }})
            .then((res) => {
              if (res.errorCode === '000000') {
                this.$message.success('一键关灯成功')
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((action) => {
          if (action === 'cancel') {
            devSiteLine({ param: { siteId, venueId, status: '0' }})
              .then((res) => {
                if (res.errorCode === '000000') {
                  this.$message.success('一键开灯成功')
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
    },
    kgdBtn(siteId) {
      // const that = this
      this.$confirm('请选择场地开关灯?', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '关灯',
        cancelButtonText: '开灯',
        type: 'warning'
      })
        .then(() => {
          const venueId = sessionStorage.getItem('venueId')
          devSiteLine({ param: { siteId: [siteId], venueId, status: '1' }})
            .then((res) => {
              if (res.errorCode === '000000') {
                this.$message.success('关灯成功')
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((action) => {
          if (action === 'cancel') {
            const venueId = sessionStorage.getItem('venueId')
            devSiteLine({ param: { siteId: [siteId], venueId, status: '0' }})
              .then((res) => {
                if (res.errorCode === '000000') {
                  this.$message.success('开灯成功')
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
    },
    pdgj() {
      configList({ param: { type: '6' }})
        .then((res) => {
          // PRESENT_MONEY_CONFIG 赠送金额
          // EDIT_PRICE_CONFIG 优惠改价
          const valueList = res.recordList
          this.canMod =
              valueList.find((item) => item.code === 'EDIT_PRICE_CONFIG') !==
              undefined
          // for (const item of valueList) {
          //   if (item.code === 'EDIT_PRICE_CONFIG') {
          //     this.canMod = true
          //   }
          // }
        })
        .catch((err) => {
          console.log(err)
        })
        // configList({ param: { type: '2', code: 'PAY_METHOD_INVOICE' }}).then(res => {
        //   console.log('----支付方式----', res)
        //   // PRESENT_MONEY_CONFIG 赠送金额
        //   // EDIT_PRICE_CONFIG 优惠改价
        //   this.payList = res.recordList
        // }).catch(err => {
        //   console.log(err)
        // })
    },
    // 获取星期
    calculation(s) {
      return s < 10 ? '0' + s : s
    },
    formatDate(date) {
      const year = date.getFullYear() + '-'
      const month = this.calculation(date.getMonth() + 1) + '-'
      const day = this.calculation(date.getDate())
      const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][
        date.getDay()
      ]
      return {
        label: month + day + ' ' + week,
        value: year + month + day,
        old: new Date(date)
      }
    },
    weekClick(e, pd) {
      if (pd) {
        this.activeDate = e.value
        this.currentDate = e.old
        this.getSiteList(2)
      }
    },
    addDate(date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    setDate(date) {
      var week = date.getDay() - 1
      if (week === -1) {
        week = 6
      }
      this.currentDate = new Date(date)
      const arr = []
      for (var i = 0; i < 7; i++) {
        arr[i] = this.formatDate(i === 0 ? date : this.addDate(date, 1))
      }
      this.weekList = arr
    },
    weekChange(e, b) {
      if (e === 1) {
        if (!b) {
          this.weekList.forEach((item) => {
            item.label =
                dayjs(item.value).subtract(7, 'day').format('MM-DD') +
                ' ' +
                mapWeek[dayjs(item.value).day()]
            item.value = dayjs(item.value)
              .subtract(7, 'day')
              .format('YYYY-MM-DD')
            item.old = new Date(item.old.getTime() - 604800000)
          })
          this.activeDate = this.weekList[0].value
          this.getSiteList()
        }
      } else {
        this.weekList.forEach((item) => {
          item.label =
              dayjs(item.value).add(7, 'day').format('MM-DD') +
              ' ' +
              mapWeek[dayjs(item.value).day()]
          item.value = dayjs(item.value).add(7, 'day').format('YYYY-MM-DD')
          item.old = new Date(item.old.getTime() + 604800000)
        })
        this.activeDate = this.weekList[0].value
        this.getSiteList()
      }
    },
    // 星期结束
    // ccClick
    ccClick(e, name, id, cnt, b) {
      this.status = e.status
      this.siteId = e.id
      this.overdue = e.overdue
      if (e.status === '0') {
        if (this.siteIds.length === 0) {
          this.siteIds = [e.id]
          this.overDues = [e.overdue]
          this.reserveForm = [{ ...e, name: name, siteModelId: id }]
        } else {
          let pd = true
          for (let num = 0; num < this.reserveForm.length; num++) {
            if (
              this.reserveForm[num].id === e.id &&
                this.reserveForm.length > 0
            ) {
              this.reserveForm.splice(num, 1)
              this.siteIds.splice(num, 1)
              this.overDues.splice(num, 1)
              if (this.reserveForm.length === 1) {
                this.status = this.reserveForm[0].status
                this.siteId = this.reserveForm[0].id
                this.overdue = this.reserveForm[0].overdue
              }
              pd = false
            }
          }
          if (pd) {
            this.siteIds.push(e.id)
            this.overDues.push(e.overdue)
            this.reserveForm.push({ ...e, name: name, siteModelId: id })
          }
          // if (id === this.reserveForm[0].siteModelId) {
          //   let pd = true
          //   for (let num = 0; num < this.reserveForm.length; num++) {
          //     if (this.reserveForm[num].id === e.id && this.reserveForm.length > 0) {
          //       this.reserveForm.splice(num, 1)
          //       this.siteIds.splice(num, 1)
          //       pd = false
          //     }
          //   }
          //   if (pd) {
          //     this.siteIds.push(e.id)
          //     this.reserveForm.push({ ...e, name: name, siteModelId: id })
          //   }
          // } else {
          //   this.siteIds = [e.id]
          //   this.reserveForm = [{ ...e, name: name, siteModelId: id }]
          // }
        }
        this.zprice = 0
        this.reserveForm.forEach((em) => {
          this.zprice = this.zprice + em.price
        })
      } else {
        this.siteIds = []
        this.overDues = []
        this.reserveForm = []
      }
      // if (Date.parse(new Date()) > Date.parse(new Date(cnt.day + ' ' + b.endTime))) {
      //   this.operation = false
      // } else {
      //   if (e.status === '0') {
      //     if (this.reserveForm.length === 0) {
      //       this.operation = false
      //     } else {
      //       this.operation = true
      //     }
      //   } else {
      //     this.operation = true
      //   }
      // }
      if (e.status === '0') {
        if (this.reserveForm.length === 0) {
          this.operation = false
        } else {
          this.operation = true
        }
      } else {
        this.operation = true
      }
      if (
        e.status === '1' ||
          e.status === '2' ||
          e.status === '4' ||
          e.status === '5'
      ) {
        siteReserve({ param: { siteId: e.id }}).then((res) => {
          console.log(res)
          this.details = res.record
          this.reserveAndOrderId = res.record.id
        })
      } else {
        this.details = {}
      }
    },
    siteFixedReserveShow() {
      if (this.status === '0' && this.siteIds.length >= 1) {
        this.$refs.fixedReserve.open(this.siteIds)
      }
    },
    // getList() {
    //   this.$router.push({ name: 'OrderList' })
    // },
    lockStatus() {
      if (this.status === '0' && this.siteIds.length <= 1) {
        siteLockStatus({ param: { type: 0, siteId: this.siteId }}).then(
          (res) => {
            if (res.errorCode === '000000') {
              this.$message.success('锁场成功')
              this.getSiteList()
              this.operation = false
            }
          }
        )
      }
    },
    cancelReserveBtn() {
      if (this.status === '1' || this.status === '4') {
        cancelReserve({
          param: { reserveAndOrderId: this.reserveAndOrderId }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('取消成功')
            this.getSiteList()
            this.details = {}
            this.operation = false
          }
        })
      } else if (this.status === '2' || this.status === '5') {
        unsubscribeOrder({
          param: { reserveAndOrderId: this.reserveAndOrderId }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('退订成功')
            this.getSiteList()
            this.details = {}
            this.operation = false
          }
        })
      }
    },
    printOrder() {
      if (
        (this.status === '2' && this.siteIds.length <= 1) ||
          (this.status === '5' && this.siteIds.length <= 1)
      ) {
        console.log('printOrder')
        this.areaOrderPrint()
      }
    },
    areaOrderPrint() {
      const venueId = sessionStorage.getItem('venueId')
      printOrder({
        param: {
          venueId,
          templateCode: 'SITETPML',
          workId: this.details.orderId
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.$message.success('打印成功')
          this.operation = false
        }
      })
    },
    lockStatusb() {
      if (this.status === '3' && this.siteIds.length <= 1) {
        siteLockStatus({ param: { type: 1, siteId: this.siteId }}).then(
          (res) => {
            if (res.errorCode === '000000') {
              this.$message.success('解锁成功')
              this.getSiteList()
              this.operation = false
            }
          }
        )
      }
    },
    toGetProjectList() {
      const venueId = sessionStorage.getItem('venueId')
      getProjectList({ param: { venueId, status: '1', type: '0' }}).then(
        (res) => {
          this.projectList = res.recordList
          this.activeProject = res.recordList[0].id
          this.toGetAreaListByProjectId(res.recordList[0].id)
        }
      )
    },
    // 预定
    reserveShow() {
      this.$refs.edit.open(
        {
          reserveForm: this.reserveForm,
          zprice: this.zprice,
          siteIds: this.siteIds
        },
        this.status,
        false
      )
    },
    // 修改预定
    editShow() {
      this.$refs.edit.open(
        {
          ...this.details,
          reserveForm: this.details.siteList,
          zprice: this.details.allPrice
        },
        this.status,
        true
      )
    },
    // 获取场区列表
    toGetAreaListByProjectId(id) {
      getAreaListByProjectId({ param: { id }}).then((res) => {
        this.areaList = res.recordList
        this.getSiteList()
      })
    },
    // 项目切换
    tabChange(tab) {
      this.activeProject = tab.name
      this.activeArea = ''
      this.areaList = []
      // this.activeDate = parseTime(new Date())
      this.toGetAreaListByProjectId(tab.name)
    },
    // 获取场次列表
    getSiteList(e) {
      this.operation = false
      this.siteIds = []
      this.reserveForm = []
      const { activeArea: areaId, activeProject: projectId, activeDate } = this
      this.currentDate = new Date(activeDate)
      const day = parseTime(activeDate).slice(0, 10)
      siteList({ param: { areaId, projectId, day, flag: '1' }}).then((res) => {
        this.siteListData = res.recordList
      })
      if (e !== 2) {
        this.setDate(new Date(activeDate))
      }
    },
    // 付款
    paymentShow(e, b) {
      if (this.status === '1' || this.status === '4' || b) {
        this.$refs.child.continuePay(e, 'areaSellOrder')
      }
    },
    searchActionc() {
      if (!this.cardFk) {
        this.$message.info('请输人卡号/手机号')
        return
      }
      VIPInfo({
        param: {
          phoneOrNo: this.cardFk
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.memberfk = res.record
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    cancelPayment() {
      this.showPayment = false
      this.payPwd = ''
    },
    changePriceClick() {
      if (this.change === 0) {
        this.change = 1
      } else {
        this.change = 0
      }
    },
    changePayMothed(item) {
      if (this.payMethod === item.value) {
        return
      }
      this.integralUse = '0'
      this.payMethod = item.value
      this.getOrderPrice()
    },
    getOrderPrice() {
      if (this.change === 1) {
        return
      }
      this.lastPrice = {}
      const param = {}
      param.orderId = this.details.orderId
      param.payMethod = this.payMethod

      if (this.payMethod === '01') {
        if (this.memberfk.id) {
          param.memberId = this.memberfk.id
        } else {
          this.$message.warning('请先搜索会员')
          return
        }
      }
      console.log('输入监听', param)
      getPrice({
        param: param
      })
        .then((res) => {
          console.log(res)
          if (res.errorCode === '000000') {
            this.lastPrice = res.record
            // this.hasLastPrice = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 换场
    cancelReplace() {
      this.membergh = ''
      this.showReplace = false
    },
    clickReplace() {
      if (this.siteIdsb.length === 0) {
        this.$message.info('请选择更换场次')
        return
      }
      changeReserve({
        param: {
          reserveAndOrderId: this.details.id,
          siteIds: this.siteIdsb
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('换场成功')
            // this.areaOrderPrint()
            this.membergh = ''
            this.showReplace = false
            this.details = {}
            this.getSiteList()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    replaceShow() {
      if (
        this.status === '1' ||
          this.status === '2' ||
          this.status === '4' ||
          this.status === '5'
      ) {
        this.showReplace = true
        this.siteIdsb = []
        this.reserveFormb = []
        if (this.details.userType === '0') {
          memberInfo({
            param: {
              id: this.details.memberId
            }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.membergh = res.record
              }
            })
            .catch((err) => {
              console.log(err)
            })
        }
      }
    },
    replacement() {
      this.showReplace = false
      this.showList = true
      this.activeDateb = this.activeDate
      this.activeAreab = this.activeArea
      this.siteListDatab = this.siteListData
      this.currentDateb = this.currentDate
      this.weekListb = this.weekList
    },
    addDateb(date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    setDateb(date) {
      var week = date.getDay()
      if (week === -1) {
        week = 6
      }
      // date = this.addDate(date, week * -1)
      this.currentDateb = new Date(date)
      const arr = []
      for (var i = 0; i < 7; i++) {
        arr[i] = this.formatDate(i === 0 ? date : this.addDate(date, 1))
      }
      this.weekListb = arr
    },
    weekChangeb(e, b) {
      if (e === 1) {
        if (!b) {
          this.weekListb.forEach((item) => {
            item.label =
                dayjs(item.value).subtract(7, 'day').format('MM-DD') +
                ' ' +
                mapWeek[dayjs(item.value).day()]
            item.value = dayjs(item.value)
              .subtract(7, 'day')
              .format('YYYY-MM-DD')
            item.old = new Date(item.old.getTime() - 604800000)
          })
          this.activeDateb = this.weekListb[0].value
          this.getSiteListb()
        }
      } else {
        this.weekListb.forEach((item) => {
          item.label =
              dayjs(item.value).add(7, 'day').format('MM-DD') +
              ' ' +
              mapWeek[dayjs(item.value).day()]
          item.value = dayjs(item.value).add(7, 'day').format('YYYY-MM-DD')
          item.old = new Date(item.old.getTime() + 604800000)
        })
        this.activeDateb = this.weekListb[0].value
        this.getSiteListb()
      }
    },
    weekClickb(e, pd) {
      if (pd) {
        this.activeDateb = e.value
        this.currentDateb = e.old
        this.getSiteListb(2)
      }
    },
    // 获取场次列表
    getSiteListb(e) {
      this.siteIdsb = []
      this.reserveFormb = []
      const {
        activeAreab: areaId,
        activeProject: projectId,
        activeDateb: activeDate
      } = this
      this.currentDateb = new Date(activeDate)
      if (e !== 2) {
        this.setDateb(new Date(activeDate))
      }
      const day = parseTime(activeDate).slice(0, 10)
      siteList({ param: { areaId, projectId, day, flag: '1' }}).then((res) => {
        this.siteListDatab = res.recordList
      })
    },
    ccClickb(e, name, id) {
      this.statusb = e.status
      if (e.status === '0') {
        if (this.siteIdsb.length === 0) {
          this.siteIdsb = [e.id]
          this.reserveFormb = [{ ...e, name: name, siteModelId: id }]
        } else {
          let pd = true
          for (let num = 0; num < this.reserveFormb.length; num++) {
            if (this.reserveFormb[num].id === e.id) {
              this.reserveFormb.splice(num, 1)
              this.siteIdsb.splice(num, 1)
              pd = false
            }
          }
          if (pd) {
            this.siteIdsb.push(e.id)
            this.reserveFormb.push({ ...e, name: name, siteModelId: id })
          }
        }
      } else {
        this.siteIdsb = []
        this.reserveFormb = []
      }
    },
    replacementBtn(e) {
      if (e === 0) {
        this.siteIdsb = []
        this.reserveFormb = []
      }
      this.showList = false
      this.showReplace = true
    },
    deleteReserve(e) {
      this.siteIdsb.splice(e, 1)
      this.reserveFormb.splice(e, 1)
    }
  }
}
</script>
  <style lang="scss" scoped>
  @import "@/styles/variables.scss";
  .app-main-container {
    display: flex;
    background-color: transparent;
    padding: 0;
    min-height: calc(100% - 40px);
    .reserve,
    .reserve-info {
      background-color: #fff;
      max-height: calc(100vh - 144px);
      overflow-y: auto;
      padding: 30px;
    }
    .reserve {
      flex: 1;
      overflow: hidden;
    }
    .date-legend {
      display: flex;
      margin-bottom: 30px;
      overflow-x: auto;
      overflow-y: hidden;
      > * {
        margin-right: 20px;
      }
      .color-list {
        margin-right: 0;
        width: 550px;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin: -10px 0;
        .color-item {
          margin-left: 20px;
          display: flex;
          align-items: center;
          padding: 10px 0;
          .number {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            margin-right: 10px;
          }
          .name {
            height: 20px;
            font-size: 13px;
            line-height: 24px;
          }
        }
      }
    }
    .week {
      display: flex;
      margin-bottom: 20px;
      span {
        flex: 1;
        text-align: center;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        background: #e8ebf7;
        border-radius: 2px;
        margin-right: 12px;
        &:first-of-type {
          width: 28px;
          flex: none;
          &.no {
            color: rgb(170, 170, 170);
            cursor: not-allowed;
          }
        }
        &:last-of-type {
          width: 28px;
          flex: none;
          margin-right: 0;
        }
        &.show {
          &.on,
          &:hover {
            color: #fff;
            background-color: $primaryColor;
          }
        }
        &.none {
          background-color: rgb(170, 170, 170);
          color: #fff;
          cursor: not-allowed;
        }
      }
    }
    .site-list-box {
      display: flex;
      margin-left: -5px;
      margin-top: -5px;
      max-height: calc(100vh - 395px);
      overflow-y: auto;
      position: relative;
      overflow-x: hidden;
      padding-left: 120px;
      .time-list {
        width: 120px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .list-item {
        border: 1px solid transparent;
        width: 120px;
        height: 40px;
        background-position: right bottom;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
        cursor: pointer;
        background-color: #dbede1;
        font-size: 15px;
      }
      .list-item.close-all,
      .list-item.time,
      .list-item.site-name {
        background-color: #f5f5f5;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        line-height: 40px;
        text-align: center;
      }
      .list-item.close-all {
        font-size: 24px;
      }
      .wzred {
        color: rgba(237, 77, 0, 1);
      }
      .site-price {
        color: rgba(74, 164, 104, 1);
      }
      .yellow {
        color: #fff;
        background-color: rgba(251, 178, 20, 1);
      }
      .blue {
        color: #fff;
        background-color: rgb(61, 206, 209);
      }
      .red {
        color: #fff !important;
        background-color: rgba(237, 77, 0, 1);
      }
      .green {
        color: #fff;
        background-color: rgba(74, 164, 104, 1);
      }
      .hui {
        color: #fff;
        background-color: rgba(170, 170, 170, 1);
      }
      .site-list {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        .site-item {
          width: 120px;
          margin-left: 5px;
        }
      }
    }
    .reserve-info {
      width: 310px;
      margin-left: 30px;
      .information {
        background: #f4f7fc;
        border-radius: 8px;
        padding: 20px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 2;
      }
      .reserveBtn {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        div {
          width: 110px;
          height: 48px;
          margin-top: 20px;
          color: #fff;
          text-align: center;
          line-height: 48px;
          background: $primaryColor;
          border-radius: 4px;
          cursor: pointer;
          // &:nth-child(odd) {
          //   margin-right: 10px;
          // }
          &.none {
            background: #cccccc;
          }
        }
      }
    }
    .dialog-replace {
      .title {
        font-size: 16px;
        font-weight: bolder;
        color: #222222;
        line-height: 2;
        margin-bottom: 15px;
        b,
        span {
          color: $SecondColor;
        }
        span {
          font-size: 13px;
          font-weight: normal;
        }
        strong {
          width: 96px;
          height: 38px;
          border-radius: 2px;
          background-color: $primaryColor;
          color: #fff;
          text-align: center;
          cursor: pointer;
          margin-right: 12px;
          display: inline-block;
          line-height: 38px;
          font-size: 14px;
        }
      }
      .replace-content {
        justify-content: space-between;
        .content {
          display: flex;
          padding: 20px;
          margin-bottom: 12px;
          box-sizing: border-box;
          background: #f4f7fc;
          border-radius: 4px;
          line-height: 1.5;
          div {
            width: 25%;
            &.delete {
              cursor: pointer;
              text-align: center;
            }
          }
          span {
            color: $primaryColor;
          }
        }
      }
    }
  }
  .member {
    background-color: rgba(67, 94, 190, 0.1);
    padding: 20px;
    .cont {
      display: flex;
      div {
        margin-right: 20px;
        font-size: 16px;
        line-height: 1.5;
        &.lx {
          border: 1px #999 solid;
          border-radius: 4px;
          background-color: #fff;
          padding: 0 20px;
        }
        span {
          color: rgb(170, 170, 170);
        }
      }
    }
  }
  </style>

